<template>
  <E-box-containers title="推荐歌单" :loading="load">
    <router-link class="box-right" slot="box-right" :to="{name:'playlist'}">
      更多
      <i class="el-icon-arrow-right" />
    </router-link>
    <div class="E-reco-playlist">
      <el-row :gutter="20">
        <el-col :span="4" v-for="(item, index) in dataArr" :key="index">
          <div class="box-item">
            <div
              class="box-content bg-image-cover"
              v-lazy:background-image="`${item.picUrl}?param=200y200`"
              v-maintain
            >
              <div class="hover">
                <span>{{item.copywriter}}</span>
              </div>
            </div>
            <p class="box-title">
              <span>{{item.name}}</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
  </E-box-containers>
</template>

<script>
export default {
  components: {
    EBoxContainers: () => import('./E-box-containers')
  },
  mounted() {
    this.getData(12);
  },
  data() {
    return {
      load: true,
      dataArr: []
    };
  },
  methods: {
    getData(limit = 12) {
      this.$api.get('reco_playlist-min', { limit }).then(({ result }) => {
        this.dataArr = result;
      }).finally(() => { this.load = false; });
    }
  },
  directives: {
    maintain: {
      inserted(el) {
        const { width } = getComputedStyle(el, null);
        // eslint-disable-next-line no-param-reassign
        el.style.height = width;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.E-reco-playlist {
  @import "@/plug-in/_base.scss";
  .el-col {
    margin-bottom: 20px;
  }
  .box-item {
    cursor: default;
    & > .box-content {
      position: relative;
      width: 100%;
      height: 130px;
      margin-bottom: 5px;
      overflow: hidden;
      cursor: pointer;
      & > .hover {
        display: block;
        background: rgba(0, 0, 0, 0.3);
        color: #fff;
        padding: 6px;
        font-size: 12px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transform: translateY(-100%);
        opacity: 0;
        transition: all 0.5s;
        span {
          @include row-dot-show(3);
        }
      }
      &:hover {
        & > .hover {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }
    & > .box-title {
      line-height: 16px;
      height: 32px;
      overflow: hidden;
      @include row-dot-show(2);
      & > span {
        color: #444;
        cursor: pointer;
        &:hover {
          color: #000;
        }
      }
    }
  }
}
</style>
